<template>
  <view class="box-bg">
    <uni-nav-bar shadow color="#F7F7F7" left-icon="left" backgroundColor="#3485FD" height="65px" title="加油站"
      @clickLeft="back" />
  </view>
  <view class="xiaoxi">
    <view class="top">
      <view class="card">
        <view class="img">
          <!-- 动态绑定封面图 -->
          <image :src="stationDetail.img" mode="scaleToFill" />
        </view>
        <view class="dizhi">
          <view class="dizhi-1">
            <!-- 动态显示名称 -->
            <view class="dizhi-1-1">{{ stationDetail.name }}</view>
            <!-- 动态显示营业时间 -->
            <view class="dizhi-1-2">营业时间: {{ stationDetail.week }}</view>
            <!-- 动态显示地址 -->
            <view class="dizhi-1-3">
              位置: {{ stationDetail.address }}
              <uni-icons style="margin-left: 10rpx;position: relative;top:5rpx" type="paperplane-filled" color="#3486fd"
                size="20"></uni-icons>
            </view>
          </view>
          <view class="dizhi-2" @click="showPhoneModal = true">
            <uni-icons type="phone-filled" color="#fff" size="30"></uni-icons>
          </view>
        </view>
      </view>

      <view class="card1">
        <view class="youjia">油价详情</view>
        <!-- 动态渲染油价列表 -->
        <view class="price" v-for="item in stationDetail.prices" :key="item.type">
          <view class="price-1">{{ item.type }}</view>
          <view class="price-2">￥{{ item.price }}/L</view>
        </view>
      </view>
    </view>
  </view>
  <!-- 添加电话号码弹出框 -->
  <view class="modal-mask" v-show="showPhoneModal">
    <view class="modal-content">
      <view class="modal-title">联系商家</view>
      <view v-if="stationDetail.phone">
        <text class="modal-phone">{{ stationDetail.phone }}</text>
        <view class="modal-btns">
          <button type="default" class="modal-btn" @click="copyPhone">复制号码</button>
          <button type="default" class="modal-btn" @click="callPhone">呼叫</button>
        </view>
      </view>
      <view v-else class="modal-empty">该加油站未提供联系电话</view>
      <button type="default" class="modal-close" @click="showPhoneModal = false">关闭</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import unirequest from '@/untils/unirequest';
import baseUrl from '@/untils/urlConfig';

const showPhoneModal = ref(false);
// 存储加油站详情的响应式对象
const stationDetail = ref({
  name: '',          // 加油站名称
  address: '',       // 地址
  week: '',          // 营业时间
  phone: '',         // 联系电话
  img: '',           // 封面图
  prices: [          // 默认油价数据
    { type: '92#', price: '7.08' },
    { type: '95#', price: '7.68' },
    { type: '0#', price: '5.86' }
  ]
});

// 页面加载时获取传递的id并请求详情
onLoad((options) => {
  const stationId = options.id; // 获取传递的id
  if (!stationId) {
    uni.showToast({ title: '缺少加油站ID', icon: 'none' });
    return;
  }
  getStationDetail(stationId);
});

// 请求加油站详情
const getStationDetail = async (id) => {
  try {
    const res = await unirequest({
      url: `${baseUrl}/gas/station/${id}`, // 假设详情接口路径
      method: 'GET'
    });
    if (res.data.code === 200) {
      stationDetail.value = {
        ...res.data.data,
        prices: res.data.data.prices || []
      };  // 赋值详情数据
    } else {
      uni.showToast({ title: '获取详情失败', icon: 'none' });
    }
  } catch (error) {
    console.error('获取详情异常:', error);
    uni.showToast({ title: '网络请求失败', icon: 'none' });
  }
};
// 拨打电话方法
const callPhone = () => {
  if (!stationDetail.value.phone) return;
  uni.makePhoneCall({
    phoneNumber: stationDetail.value.phone,
    success: () => console.log('拨号成功'),
    fail: () => uni.showToast({ title: '拨号失败', icon: 'none' })
  });
};
// 复制电话号码方法
const copyPhone = () => {
  if (!stationDetail.value.phone) return;
  uni.setClipboardData({
    data: stationDetail.value.phone,
    success: () => {
      uni.showToast({ title: '已复制电话号码', icon: 'none' });
      showPhoneModal.value = false; // 复制成功后关闭弹窗
    },
    fail: () => uni.showToast({ title: '复制失败', icon: 'none' })
  });
};
// 返回上一页方法
const back = () => {
  uni.navigateBack()
}
</script>

<style scoped>
.box-bg {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}

.xiaoxi {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #f7f7f7;
  margin-top: 116rpx
}

.top {
  width: 100%;
  height: 400rpx;
  background-color: rgb(52, 134, 253);
  background-size: cover;
}

.card {
  border-radius: 20rpx;
}

.card1 {
  border-radius: 20rpx;
  background-color: #DEE0E1;
  width: 96%;
  margin-left: 2%;
}

.dizhi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 60rpx;
  background-color: #DEE0E1;
  width: 96%;
  margin-left: 2%;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}

.dizhi-1 {
  padding: 14rpx 20rpx 20rpx 20rpx;
}

.dizhi-1-1 {
  font-size: 30rpx;
  color: #000;
  margin-bottom: 20rpx;
}

.dizhi-1-2 {
  font-size: 24rpx;
  color: #000000;
}

.dizhi-1-3 {
  font-size: 24rpx;
  color: #000000;
}

.dizhi-2 {
  background-color: #3486fd;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20rpx;
}

.img {
  width: 100%;
  height: 200px;
  margin-bottom: 20rpx;
}

.img image {
  width: 100%;
  height: 360rpx;
  border-radius: 20rpx;
  width: 96%;
  margin-left: 2%;
  margin-top: 20rpx;
}

.text text {
  margin: 0 auto;
  font-size: 28rpx;
  color: #000;
  line-height: 2.5;
}

.youjia {
  color: #000;
  font-size: 32rpx;
  margin-bottom: 20rpx;
  padding-left: 14rpx;
  padding-top: 20rpx;
}

.price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
}

.price-1 {
  color: #000;
  text-align: center;
  width: 40%;
}

.price-2 {
  color: #ff4000;
  text-align: center;
  width: 40%;
}

.modal-mask {
  position: fixed;
  top: 0;
  left: -20rpx;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1001;
  display: flex;
  justify-content: center;
  align-items: flex-end; /* 垂直方向靠下 */
  padding: 0 20rpx 40rpx; 
}

/* 模态框内容区 */
.modal-content {
  background: #fff;
  min-width: 600rpx;
  width: 100%;
  max-width: 750rpx; /* 最大宽度限制 */
  border-radius: 20rpx 20rpx 0 0; /* 顶部圆角 */
  padding: 40rpx 20rpx 20rpx; /* 调整内边距 */
  margin: 0 auto; /* 水平居中 */
}

/* 模态框标题 */
.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  text-align: center;
}

/* 电话号码文本 */
.modal-phone {
  font-size: 40rpx; /* 字体增大 */
  color: #333;
  text-align: center; /* 水平居中 */
  width: 100%; /* 确保容器宽度占满 */
  margin-left: 32%;
  position: relative;
  top: -20rpx; /* 向上移动20rpx */;
}
/* 操作按钮区 */
.modal-btns {
  display: flex;
  justify-content: center;
  gap: 40rpx;
  margin-bottom: 20rpx;
  max-width: 600rpx; /* 限制按钮区最大宽度 */
  margin-left: auto; /* 配合max-width实现水平居中 */
  margin-right: auto;
}

/* 操作按钮 */
.modal-btn {
  background: #3486fd;
  color: #fff;
  padding: 15rpx 0; /* 左右内边距改为0，通过width控制宽度 */
  border-radius: 15rpx;
  font-size: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(52, 134, 253, 0.2);
  transition: all 0.2s;
  width: 240rpx; /* 固定按钮宽度，保证一致 */
  text-align: center; /* 文字居中 */
}
.modal-btn:hover {
  background: #2a6ed6; /* 悬停颜色加深 */
  transform: scale(1.03); /* 轻微放大效果 */
}

/* 无电话提示 */
.modal-empty {
  font-size: 28rpx;
  color: #666;
  text-align: center;
  margin-bottom: 30rpx;
}

.modal-close {
  color: #666;
  font-size: 28rpx;
  padding: 15rpx;
  background: #f8f8f8; /* 浅灰色背景 */
  border-radius: 0 0 20rpx 20rpx; /* 底部圆角 */
  margin-top: 20rpx;
}
.modal-empty {
  font-size: 30rpx;
  color: #999;
}
</style>